  
    <h1>用户中心</h1>
    <div id="user">设置基本信息<label id="email"></label></label></div> 
    
    <div>        
        <label>尊称:</label>
        <input type="text" name="vname" id="vname" value="">
    </div>
    <div>        
        <table border=0 width="50%" align="left">
        <tr><td width="5%">
        <label>语言:</label>
        </td><td width="90%">&nbsp;</td></tr>
        <tr><td width="5%">&nbsp;</td><td>
        <input type="radio" name="lang" value="cn" id="lg0"><label for="lg0">简体中文</label></input><br>
        </td></tr>
        <tr><td width="5%">&nbsp;</td><td>
        <input type="radio" name="lang" value="en" id="lg1"><label for="lg1">英文</label></input>
        </td></tr>
        <tr><td width="5%">&nbsp;</td><td>
        <input type="radio" name="lang" value="big5" id="lg2"><label for="lg2">繁体中文</label></input>
        </td></tr>
        <tr><td width="5%">&nbsp;</td><td>&nbsp;</td>
        <tr><td colspan="2">
        <input type="hidden" name="uicon">    
        </td></tr>
        </table>
    </div>
    
    <div>
        <label>尊容:</label> 
        <input type="file" id="uploadInput" onChange="upload()">    
    </div>
    <div id="previewDiv">
        <img id="preview" src="" alt="预览图片"  width="100px" height="100px">
    </div>
    <div>
         <br>
    </div>
    <div>  
        <button name="save" onClick="saveInfo()">保存设置</button>
    </div> 
      

<script>   
  	
  	function saveInfo(){
  		debugger;
  		var token = curUser["token"];
  		var user={"email":curUser["email"],
  				"icon":getInputValue("uicon"),
  				"vname":getInputValue("vname"),
  				"lang":getInputValue("lang")
  			};	
  		 
		ajaxPostJson(save_base_uri , token, user , function(status,ret){
				  console.log("Status="+status);
				  console.log("logout Data="+JSON.stringify(ret,null,2)); 
				  if(ret.status==1){ 
					  curUser = ret["data"]; 
					  //alert(JSON.stringify(curUser,null,2)); 
					  localStorage.setItem("cuser", JSON.stringify(curUser));
					  showUserInfo();
					  alert("Save User info Succeed!");
				  }else{
					  alert(JSON.stringify(ret,null,2));  
				  }
		});
  	}
  	
	 
  
  function showUserInfo(user = null){
	  debugger
	  if(user == null){
		  user = curUser;
	  }
	  debugger;
	  if(user != null){
		  var div = document.getElementById("preview"); 
		  if(user["icon"] != null){
			  //div["src"] = uri_prefix + show_user_img + user["icon"] + "?t=" + new Date().getTime(); 
			  div["src"] = "uploads/uicon/"+user["icon"] + "?t=" + new Date().getTime(); 
			  div.style.display = "block"; 
		  } 
		  var email = document.getElementById("email"); 
		  //email.innerText = "<b>["+ curUser["email"]+"]</b>";
		  email.innerHTML = "<b>["+ curUser["email"]+"]</b>";
		  setInputValue("vname",user["vname"]);
		  setInputValue("lang",user["lang"]);
		  setInputValue("uicon",user["icon"]);
	  }else{
		  var div = document.getElementById("login"); 
		  var html = "<br><strong><a href='login.html'>Nlll user!login</a></strong>"; 
		  div.innerHTML = html ;
	  } 
	  console.log("curUser:"+JSON.stringify(user));
  }
  
  function upload(){
  	  debugger; 
  	  if(curUser==null){
  		  alert("Please login first!");
  		  return;
  	  }
  	  const allowedTypes = ["image/jpeg", "image/png"];//, "application/pdf"];
      const maxSize = 5 * 1024 * 1024; // 最大文件大小限制为 5MB
      const file = event.target.files[0];
      
      var user={"email":curUser["email"],
				"icon":curUser["icon"],
				"vname":getInputValue("vname"),
				"lang":getInputValue("lang")
			};	
      
      if (!allowedTypes.includes(file.type)) {
	       alert("不支持的文件类型！");
	       return;
	   }

	   if (file.size > maxSize) {
	       alert("文件大小超出限制！");
	       return;
	   }  
      // 上传文件的服务器地址
      const uploadUrl = uri_prefix + upload_file_user;
      
      uploadFile(uploadUrl,  curUser["token"] , file,  function(status,ret){
    	  if(status == 0){
    		  if(ret.status==1){
    			  user["icon"] = ret["data"];
        		  localStorage.setItem("cuser", JSON.stringify(curUser));
        		  showUserInfo(user); 
    		  }else{
    			  alert("Failed!\r\nMsg:"+ret["desc"]);
    		  } 
    	  }else{
    		  alert("Failed!\r\nMsg:"+ret);
    	  }
      }); 
  }
  
  showUserInfo();
  
</script> 
